<template>
  <div class="sec-alert">
    <el-alert type="success" v-if="['done'].includes(data.status)" show-icon :closable="false">
      <div slot="title">
        <div class="status">{{ data.statusLabel }}</div>
        <div class="content" v-html="intro[data.statusLabel]"></div>
        <operationBtn @initPage="initPage" :detailData="data"></operationBtn>
      </div>
    </el-alert>
    <el-alert type="warning" v-if="['doing', 'pending', 'close'].includes(data.status)" show-icon :closable="false">
      <div slot="title">
        <div class="status">{{ data.statusLabel }}</div>
        <div class="content" v-html="intro[data.statusLabel]"></div>
        <operationBtn @initPage="initPage" :detailData="data"></operationBtn>
      </div>
    </el-alert>
    <!-- <el-alert type="error" v-if="['Reject', 'DisAgree'].includes(data.status)" show-icon :closable="false">
      <div slot="title">
        <div class="status">{{ data.statusName }}</div>
        <div class="content" v-html="statusMessageEnum[data.status]"></div>
        <operationBtn @initPage="initPage" :detailData="data"></operationBtn>
      </div>
    </el-alert> -->
    <!-- <el-alert type="info" v-if="['Expired'].includes(data.status)" show-icon :closable="false">
      <div slot="title">
        <div class="status">{{ data.statusName }}</div>
        <div class="content" v-html="statusMessageEnum[data.status]"></div>
        <operationBtn @initPage="initPage" :detailData="data"></operationBtn>
      </div>
    </el-alert> -->
  </div>
</template>

<script>
import operationBtn from "./detailOperation.vue";
export default {
  name: "alertInfo",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  components: { operationBtn },
  data() {
    return {
      intro: {
        待认领: "请确认以下风险信息后认领，认领后可以对其风险进行处置跟踪。",
        待处理: "请确认以下风险信息，参考处置建议进行处理，处理后安全部门会进行审核。",
        申诉中: "当前申诉正在审批中，可以点击审批详情了解进度。",
        验证中: "当前工单正在验证中。",
        已完成: "当前风险已经处置完成。",
        已关闭: "当前风险工单已经关闭。",
      },
    };
  },
  computed: {},
  mounted() {},
  methods: {
    initPage() {},
    setStatusLable() {
      let { status, appeal, processData } = this.data;
      console.log("[ this.data ] >", this.data);
      if (
        (status == "pending" && appeal != "0" && appeal != "1") ||
        (status == "pending" && processData.bpmStatus == "5")
      ) {
        this.data.statusLabel = "待认领";
      } else if (
        (status == "pending" || status == "doing") &&
        (appeal == "0" || appeal == "1") &&
        processData.bpmStatus != "5"
      ) {
        this.data.statusLabel = "申诉中";
      } else if (
        (status == "doing" && appeal != "0" && appeal != "1") ||
        (status == "doing" && processData.bpmStatus == "5")
      ) {
        this.data.statusLabel = "待处理";
      } else if ((status == "pending" || status == "doing") && appeal == "3") {
        this.data.statusLabel = "验证中";
      } else if (status == "done") {
        this.data.statusLabel = "已完成";
      } else if (status === "close") {
        this.data.statusLabel = "已关闭";
      }
    },
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.setStatusLable();
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.el-alert {
  padding: 12px 16px;
  align-items: start;
  ::v-deep .el-alert__icon {
    font-size: 20px;
    margin-right: 5px;
  }
}
.el-alert--warning {
  border: 1px solid #ffe58f;
}
.el-alert--success {
  border: 1px solid #91d5ff;
}
.el-alert--error {
  border: 1px solid #ffa39e;
}
.el-alert--info {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.status {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.sec-alert {
  margin-top: 10px;
}
.content {
  display: flex;
  margin: 6px 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}
::v-deep .dc-user {
  &.hide {
    display: none;
  }
  display: flex;
  align-items: center;
  // color: #606266 !important;
  font-size: 14px;
  color: #409eff !important;
  margin: 0 5px;
  img {
    width: 15px;
    margin-left: 3px;
  }
}
</style>
